<template>
	<view class="box">
		<view class="header">
		   <view class="left">
			   <nut-icon
					:name="flagIcon" 
					custom-color="rgb(87, 150, 92)"/>
			   <text>控制台</text>
		   </view>
		   <view></view>
		</view>
		<view class="box-1">
			<CMDTerminal></CMDTerminal>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { useSocketCreator } from '@/utils/useSocketCreator'
	const flag = ref<string>('STOP')
	const flagIcon = computed<string>(() => {
		return flag.value === 'STOP' ? 'heart1' : 'heart-fill'
	})
	const createWS = () => {
		console.log("命令行页面创建websocket")
	}
	useSocketCreator(uni, createWS)
</script>

<style>
	.box {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.left {
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	.left > text {
		margin-left: 16rpx;
	}
	
	.header text {
		color: rgb(186, 188, 194);
	}
	
	.header {
		height: 72rpx;
		display: flex;
		align-items: center;
		flex: none;
		padding: 0 16rpx;
		justify-content: space-between;
		background-color: rgb(19, 19, 19);
		border-radius: 10rpx 10rpx 0 0;
		border-bottom: 1px solid rgb(30, 31, 34);
	}

	.box-1 {
		flex: 1;
		border-radius: 0 0 10rpx 10rpx;
		background-color: rgb(30, 31, 34);
	}
	
</style>